<template>
  <div class="chart-container">
    <canvas width="1200" height="300" ref="chartRef"></canvas>
    <div class="e-select">
      <el-select v-model="alarmStatus" placeholder="请选择" clearable style="width: 150px">
        <el-option
          v-for="dict in alarmStatusList"
          :key="dict.pointId"
          :label="dict.attrGroupName"
          :value="dict.pointId"
        />
      </el-select>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, ref, nextTick } from 'vue';
  import * as echarts from 'echarts';
  import { getCurveInfo } from '@/api/auth/ledger.js';
  import { tagsStore } from '@/stores';
  const authNav = tagsStore();
  const chartRef = ref(null);
  const myChart = ref(null);
  const option = ref(null);
  const listPages = ref([]);
  const legendData = ref([]);
  const alarmStatusList = ref([]);
  const xAxisDatas = ref([
    '00:00',
    '02:00',
    '04:00',
    '06:00',
    '08:00',
    '10:00',
    '12:00',
    '14:00',
    '16:00',
    '18:00',
    '20:00',
    '22:00',
    '23:59'
  ]);
  const xAxisData = ref([]);
  const seriesData = ref([]);
  const alarmStatus = ref('');
  const myArr = ref({
    pointId: '460',
    pointType: 2,
    attrGroupName: '油色谱',
    atrrName: '二氧化碳',
    pointVal: 152.9313,
    pointUnit: null,
    pointValDesc: 'KHPDFI_2#主变油色谱_2#主变油色谱在线监测装置_0|CO2ppm',
    deviceCode: '1_2_1',
    deviceName: '2号主变',
    createTime: '2024-08-05 16:57:03',
    voList: [
      {
        createTime: '00:00',
        pointVal: 1
      },
      {
        createTime: '16:44',
        pointVal: 152.9313
      },
      {
        createTime: '16:45',
        pointVal: 152.9313
      },
      {
        createTime: '16:50',
        pointVal: 152.9313
      },
      {
        createTime: '16:57',
        pointVal: 152.9313
      },
      {
        createTime: '17:03',
        pointVal: 152.9313
      },
      {
        createTime: '17:05',
        pointVal: 152.9313
      },
      {
        createTime: '17:06',
        pointVal: 152.9313
      },
      {
        createTime: '17:13',
        pointVal: 152.9313
      },
      {
        createTime: '17:23',
        pointVal: 152.9313
      },
      {
        createTime: '17:24',
        pointVal: 152.9313
      }
    ]
  });
  const params = ref({
    deviceCode: '',
    attrGroupName: '',
    createTime: ''
  });
  onMounted(() => {
    nextTick(() => {
      curveInfo();
    });
  });
  function generateTimeIntervals() {
    const timeIntervals = [];
    for (let hour = 0; hour < 24; hour += 2) {
      // 使用 padStart 确保小时和分钟始终有两位数字
      const timeStr = `${hour.toString().padStart(2, '0')}:${'00'}`;
      timeIntervals.push(timeStr);
    }
    return timeIntervals;
  }
  const curveInfo = () => {
    for (let hour = 0; hour < 24; hour++) {
      for (let minute = 0; minute < 60; minute++) {
        const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
        xAxisData.value.push(timeStr);
      }
    }
    getCurveInfo(params.value).then((res) => {
      params.value.deviceCode = authNav.deviceCode;
      const rows = res.data;
      alarmStatusList.value = res.data;
      // debugger;
      const seriesData = [];

      // 使用 for 循环遍历 rows 数组
      for (let i = 0; i < rows.length; i++) {
        const item = rows[i];
        const dataSeries = {
          name: item.attrName, // 假设每条数据都有一个 attrName 属性
          type: 'line',
          symbol: false,
          smooth: true,
          data: []
        };

        let lastValue = 10; // 初始化上一个时间点的 pointVal
        // 遍历每个时间点
        for (let j = 0; j < xAxisData.value.length; j++) {
          const time = xAxisData.value[j];
          const vo = item.voList.find((v) => v.createTime === time);

          if (vo) {
            // 如果找到匹配的时间点，更新 lastValue
            lastValue = vo.pointVal;
          } else {
            // 如果当前时间点没有匹配的数据，使用上一个时间点的 pointVal
            // 这里假设 lastValue 在第一个有效数据之前为 null，您可以根据需要设置一个默认值
            lastValue = seriesData.data[i - 1] ? seriesData.data[i - 1] : lastValue;
          }

          // 将计算出的值添加到 dataSeries.data 数组中
          dataSeries.data.push(lastValue);
        }
        // 将当前数据系列的结果添加到 seriesData 数组中
        seriesData.push(dataSeries);
      }

      // 现在 seriesData 包含了所有数据系列，您可以将其设置到相应的变量或组件状态中
      console.log('seriesData', seriesData);
      // const seriesData = {
      //   name: myArr.value.attrName,
      //   type: 'line',
      //   symbol: false,
      //   smooth: true,
      //   data: []
      // };
      // console.log('xAxisData.value', myArr.value);
      // let lastValue = 10; // 或者 seriesData.data[0]?.pointVal || 10;
      // // 使用 for 循环来构建 data 数组
      // for (let i = 0; i < xAxisData.value.length; i++) {
      //   const time = xAxisData.value[i];
      //   const vo = myArr.value.voList.find((v) => v.createTime === time);
      //   if (vo) {
      //     // 如果找到匹配的时间点，更新 lastValue
      //     lastValue = vo.pointVal;
      //   } else {
      //     // 如果当前时间点没有匹配的数据，使用上一个时间点的 pointVal
      //     lastValue = seriesData.data[i - 1] ? seriesData.data[i - 1] : lastValue;
      //   }
      //   // 将计算出的值添加到 seriesData.data 数组中
      //   seriesData.data.push(lastValue);
      // }
      // console.log('res====', xAxisData.value, seriesData);
      // seriesData.value = {
      //   name: myArr.value.attrName,
      //   type: 'line',
      //   symbol: false,
      //   smooth: true,
      //   data: xAxisData.value.map((time, index) => {
      //     const vo = myArr.value.voList.find((v) => v.createTime === time);
      //     console.log('vo---', vo);
      //     if (vo) {
      //       console.log('第一个', vo.createTime, time);
      //       // 如果找到匹配的时间点，更新 lastValue
      //       lastValue = vo.pointVal;
      //       console.log('lastValue', lastValue, vo.pointVal);
      //     } else {
      //       // 如果当前时间点没有匹配的数据，使用上一个时间点的 pointVal
      //       const currentValue = index === 0 ? lastValue : lastValue;
      //       console.log('currentValue:', currentValue);
      //       return currentValue;
      //     }
      //   })
      // };
      // const seriesData = rows.map((item) => {
      //   const seriesItem = {
      //     name: item.deviceName,
      //     type: 'line',
      //     symbol: false,
      //     smooth: true,
      //     data: []
      //   };

      //   // 初始化 seriesItem.data，长度与 xAxisData 相同，初始值为 null
      //   seriesItem.data = new Array(xAxisData.value.length).fill(null);

      //   // 处理 voList 数据
      //   item.voList.forEach((vo) => {
      //     const timeIndex = xAxisData.value.indexOf(vo.createTime);
      //     console.log('timeIndex', timeIndex);
      //     if (timeIndex !== -1) {
      //       // 如果 createTime 在 xAxisData 中，更新 seriesItem.data
      //       seriesItem.data[timeIndex] = vo.pointVal;
      //     }
      //   });

      //   // 返回处理后的 series 数据项
      //   return seriesItem;
      // });
      // 初始化 seriesData 数组

      // let lastValue = null;
      // seriesData.value = rows.map((item) => {
      //   console.log('item.voList', item.voList);
      //   console.log('seriesData', item);
      //   let lastValue = null; // 初始化上一个时间点的 pointVal
      //   return {
      //     name: item.atrrName,
      //     type: 'line',
      //     symbol: false,
      //     smooth: true,
      //     data: xAxisData.value.map((time) => {
      //       const vo = item.voList.find((v) => v.createTime == time);
      //       console.log('vo---', vo);
      //       if (vo) {
      //         console.log('第一个', vo, time);
      //         // 如果找到匹配的时间点，更新 lastValue
      //         lastValue = vo.pointVal;
      //       } else {
      //         // 如果当前时间点没有匹配的数据，使用上一个时间点的 pointVal
      //         const currentValue = lastValue;
      //         console.log('currentValue:', currentValue); // 打印出当前的 pointVal
      //         return currentValue; // 返回上一个时间点的 pointVal
      //       }
      //     })
      //   };
      // });
      // const xAxisData = [];
      // for (let hour = 0; hour < 24; hour++) {
      //   for (let minute = 0; minute < 60; minute++) {
      //     const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
      //     xAxisData.value.push(timeStr);
      //   }
      // }
      // for (let hour = 0; hour < 24; hour += 2) {
      //   for (let minute = 1; minute < 60; minute += 5) {
      //     const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
      //     xAxisData.value.push(timeStr);
      //   }
      // }
      // console.log('minuteIntervalTimeData', minuteIntervalTimeData);
      // const xAxisTimeData = [];
      // for (let hour = 0; hour < 24; hour++) {
      //   xAxisTimeData.push(`${String(hour).padStart(2, '0')}:00`); // 格式为 "HH:00"
      // }
      // const seriesData = rows.map((item) => {
      //   return {
      //     name: item.deviceName, // 系列名称
      //     type: 'line',
      //     symbol: false,
      //     smooth: true,
      //     data: xAxisTimeData.map((time) => {
      //       // 找到与当前时间点匹配的数据
      //       console.log('time', time);
      //       const vo = item.voList.find((vo) => {
      //         const timeMatch = new Date(vo.createTime).Format('HH:mm') === time;
      //         return timeMatch;
      //       });
      //       return vo ? [time, vo.pointVal] : [time, null]; // 匹配则使用数据点，否则使用 null
      //     })
      //   };
      // });
      // for (let i = 0; i < rows.length; i++) {
      //   const item = rows[i];
      //   const dataSeries = {
      //     name: item.attrName, // 假设每条数据都有一个 attrName 属性
      //     type: 'line',
      //     data: []
      //   };
      //   let lastValue = 0; // 初始化上一个时间点的 pointVal
      //   // 遍历每个时间点
      //   for (let j = 0; j < xAxisData.value.length; j++) {
      //     const time = xAxisData.value[j];
      //     const vo = item.voList.find((v) => v.createTime === time);
      //     let currentValue = lastValue;
      //     if (vo) {
      //       // 如果找到匹配的时间点，更新 lastValue
      //       lastValue = vo.pointVal;
      //     } else {
      //       // 如果当前时间点没有匹配的数据，使用上一个时间点的 pointVal
      //       // 这里假设 lastValue 在第一个有效数据之前为 null，您可以根据需要设置一个默认值
      //       console.log('seriesData11111111111');
      //       // lastValue = seriesData.data[j - 1] ? seriesData.data[j - 1] : lastValue;
      //       // 添加当前值到 data 系列
      //       lastValue = currentValue;
      //     }
      //     // 将计算出的值添加到 dataSeries.data 数组中
      //     dataSeries.data.push(currentValue);
      //   }
      //   // 将当前数据系列的结果添加到 seriesData 数组中
      //   seriesData.value.push(dataSeries);
      // }
      // 现在 seriesData 包含了所有数据系列，您可以将其设置到相应的变量或组件状态中
      // xAxisData.value = rows.flatMap((row) => row.voList.map((item) => formatTime(item.createTime)));
      // 格式化 xAxis 时间数据
      // xAxisData.value = Array.from(new Set(rows.flatMap((item) => item.voList.map((vo) => vo.createTime)))).sort();
      // xAxisData.value = xAxisData.value.map((timeString) => {
      //   const time = new Date(timeString);
      //   return time.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
      // });
      // legendData.value = rows.map((item) => item.atrrName);
      // // 更新系列数据
      // seriesData.value = rows.map((item) => {
      //   return {
      //     name: item.attrName,
      //     type: 'line',
      //     symbol: false,
      //     smooth: true,
      //     data: item.voList.map((vo) => [
      //       new Date(vo.createTime).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
      //       vo.pointVal
      //     ])
      //   };
      // });
      // 更新系列数据
      // seriesData.value = rows.map((item) => {
      //   return {
      //     name: item.attrName,
      //     type: 'line',
      //     symbol: false,
      //     smooth: true,
      //     label: {
      //       show: false
      //     },
      //     data: item.voList.map(vo => [new Date(vo.createTime).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }), vo.pointVal]),
      //   };
      // });
      // seriesData.value = rows.map((item) => {
      //   return {
      //     name: item.atrrName, // 使用设备名称作为数据线名称
      //     type: 'line', // 图表类型为折线图
      //     symbol: false,
      //     smooth: true, // 绘制曲线
      //     // 可以添加其他配置，例如 label 来显示数据标签（如果需要）
      //     label: {
      //       show: false // 如果不希望显示数据标签，设置为 false
      //     },
      //     data: item.voList.map((vo) => vo.pointVal) // 提取 voList 中的数据点值
      //   };
      // });

      chartDomFun();
    });
  };
  const formatTime = (dateString) => {
    const d = new Date(dateString);
    return d.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
  };
  const formatTimes = (time) => {
    const hours = time.getHours();
    const minutes = time.getMinutes().toString().padStart(2, '0');
    return `${hours}:${minutes}`;
  };
  const chartDomFun = () => {
    const chartDom = chartRef.value;
    myChart.value = echarts.init(chartDom);

    option.value = {
      width: '1150px',
      height: '240px',
      title: {
        text: '单位/kV', // 初始垂直位置为中间
        x: 20, // 向右偏移20px
        y: 20,
        textStyle: {
          fontSize: 14, // 标题字体大小
          color: '#ffffff' // 标题字体颜色
        }
      },
      legend: {
        data: legendData.value,
        textStyle: {
          color: '#fff' // 设置图例字体颜色为白色
        }
      },
      grid: {
        left: '3%',
        right: '0',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {
            show: false // 隐藏下载按钮
          }
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xAxisData.value,
        splitNumber: 0,
        axisLabel: {
          margin: 15,
          color: '#fff', // 设置字体颜色为白色
          show: true, // 显示刻度标签
          interval: 0, // 显示所有标签
          formatter: function (value, index) {
            // 返回 displayTimes 中的时间点，否则返回 ''
            return xAxisDatas.value.includes(value) ? value : '';
          }
        }
      },
      yAxis: {
        type: 'value',
        splitNumber: 4,
        minorTick: { show: false, splitNumber: 4 },
        axisLabel: {
          color: '#fff',

          formatter: function (value) {
            // 给 y 轴标签添加单位 'kV'
            return value + ' kV';
          } // 设置字体颜色为白色
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#eee', // 轴线颜色
            width: 1, // 轴线宽度
            opacity: '0.36'
          }
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross' // 启用十字准线
        }
        // 其他 tooltip 配置项
      },
      series: seriesData.value
    };

    if (myChart.value !== null && option.value) {
      myChart.value.setOption(option.value);
    }
  };
  // 确保在组件卸载时销毁图表实例
  onUnmounted(() => {
    if (myChart.value !== null) {
      myChart.value.dispose();
    }
  });
</script>

<style lang="scss" scoped>
  .chart-container {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
    position: relative;

    .e-select {
      position: absolute;
      top: 10px;
      right: 32px;
      z-index: 999;
    }
  }
</style>
<style>
  .echarts-toolbox button:nth-child(1) {
    display: none !important;
  }
</style>
